<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩管理系统 - 管理员端</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

    <style>
        .admin-container {
            display: flex;
            min-height: 100vh;
            background: #f0f2f5;
        }

        .admin-sidebar {
            width: 220px;
            background: #fff;
            box-shadow: 2px 0 8px rgba(0,0,0,.1);
        }

        .admin-main {
            flex: 1;
            padding: 20px;
        }

        .dashboard-card {
            margin-bottom: 20px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .data-card {
            padding: 20px;
            margin: 10px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,.1);
        }

        .chart-container {
            height: 400px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="admin-app">
        <el-container>
            <!-- 顶部导航栏 -->
            <el-header style="background: #2c3e50; color: white; display: flex; justify-content: space-between; align-items: center;">
                <span style="font-size: 20px;">学生成绩管理系统 - 管理员端</span>
                <div>
                    <el-button type="text" style="color: white;" @click="showUserCenter">
                        <i class="el-icon-user"></i> {{ adminInfo.username }}
                    </el-button>
                    <el-button type="text" style="color: white;" @click="logout">
                        <i class="el-icon-switch-button"></i> 退出
                    </el-button>
                </div>
            </el-header>

            <div class="admin-container">
                <!-- 侧边栏菜单 -->
                <el-menu class="admin-sidebar" 
                         default-active="1"
                         @select="handleMenuSelect">
                    <el-menu-item index="1">
                        <i class="el-icon-data-analysis"></i>
                        <span>数据看板</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-user-solid"></i>
                        <span>用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-school"></i>
                        <span>班级管理</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-document"></i>
                        <span>系统日志</span>
                    </el-menu-item>
                </el-menu>

                <!-- 主内容区 -->
                <div class="admin-main">
                    <!-- 数据看板 -->
                    <div v-if="currentView === 'dashboard'" class="dashboard-card">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <div class="data-card">
                                    <h3>教师总数</h3>
                                    <p style="font-size: 24px; color: #409EFF;">{{ statistics.teacherCount }}</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="data-card">
                                    <h3>班级总数</h3>
                                    <p style="font-size: 24px; color: #67C23A;">{{ statistics.classCount }}</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="data-card">
                                    <h3>活跃用户</h3>
                                    <p style="font-size: 24px; color: #E6A23C;">{{ statistics.activeUsers }}</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="data-card">
                                    <h3>成绩记录</h3>
                                    <p style="font-size: 24px; color: #F56C6C;">{{ statistics.scoreRecords }}</p>
                                </div>
                            </el-col>
                        </el-row>

                        <div class="chart-container">
                            <div id="main-chart" style="height: 100%;"></div>
                        </div>
                    </div>

                    <!-- 用户管理 -->
                    <div v-if="currentView === 'users'">
                        <el-card>
                            <div slot="header" style="display: flex; justify-content: space-between;">
                                <span>教师账户管理</span>
                                <el-button type="primary" @click="showAddUserDialog">新增教师</el-button>
                            </div>
                            <el-table :data="userList" border stripe>
                                <el-table-column prop="username" label="用户名"></el-table-column>
                                <el-table-column prop="realname" label="姓名"></el-table-column>
                                <el-table-column prop="email" label="邮箱"></el-table-column>
                                <el-table-column prop="status" label="状态">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                                            {{ scope.row.status === 1 ? '正常' : '禁用' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="200">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
                                        <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>

                    <!-- 新增/编辑用户对话框 -->
                    <el-dialog :title="userDialogTitle" :visible.sync="userDialogVisible" width="500px">
                        <el-form :model="currentUser" label-width="80px">
                            <el-form-item label="用户名" required>
                                <el-input v-model="currentUser.username"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" required>
                                <el-input v-model="currentUser.realname"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" required>
                                <el-input v-model="currentUser.email"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" v-if="isNewUser">
                                <el-input type="password" v-model="currentUser.password"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-switch v-model="currentUser.status" 
                                         :active-value="1"
                                         :inactive-value="0">
                                </el-switch>
                            </el-form-item>
                        </el-form>
                        <span slot="footer">
                            <el-button @click="userDialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="submitUserForm">确认</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
        </el-container>
    </div>

    <script>
        new Vue({
            el: '#admin-app',
            data() {
                return {
                    currentView: 'dashboard',
                    adminInfo: {
                        username: '管理员'
                    },
                    statistics: {
                        teacherCount: 0,
                        classCount: 0,
                        activeUsers: 0,
                        scoreRecords: 0
                    },
                    userList: [],
                    currentUser: {},
                    userDialogVisible: false,
                    isNewUser: false,
                    userDialogTitle: '新增教师'
                }
            },
            methods: {
                handleMenuSelect(index) {
                    const views = ['dashboard', 'users', 'classes', 'logs']
                    this.currentView = views[index - 1]
                },
                showAddUserDialog() {
                    this.currentUser = {
                        username: '',
                        realname: '',
                        email: '',
                        password: '',
                        status: 1
                    }
                    this.isNewUser = true
                    this.userDialogTitle = '新增教师'
                    this.userDialogVisible = true
                },
                editUser(user) {
                    this.currentUser = {...user}
                    this.isNewUser = false
                    this.userDialogTitle = '编辑用户'
                    this.userDialogVisible = true
                },
                async submitUserForm() {
                    try {
                        const url = this.isNewUser ? '/api/users' : `/api/users/${this.currentUser.id}`
                        const method = this.isNewUser ? 'post' : 'put'
                        
                        const response = await axios[method](url, this.currentUser)
                        
                        if(response.data.success) {
                            this.$message.success('操作成功')
                            this.userDialogVisible = false
                            this.loadUserList()
                        }
                    } catch (error) {
                        this.$message.error('操作失败')
                    }
                },
                async loadUserList() {
                    const response = await axios.get('/api/users')
                    this.userList = response.data
                },
                logout() {
                    localStorage.removeItem('adminToken')
                    window.location.href = '/login'
                }
            },
            mounted() {
                // 初始化图表
                const chartDom = document.getElementById('main-chart')
                const myChart = echarts.init(chartDom)
                const option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    }]
                }
                myChart.setOption(option)
                
                // 加载初始数据
                this.loadUserList()
            }
        })
    </script>
</body>
</html>